import React from 'react'
import TextField from 'material-ui/TextField';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import ContentClear from 'material-ui/svg-icons/content/clear';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import Dialog from 'material-ui/Dialog';
import QuestionAdder from './QuestionAdder';


const myStyles = {
    row: {display: 'flex', alignItems: 'center'},
    twiceRem: {height: '2rem'},
}

export default class CreateSurvey extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            title: '你的傻逼程度调查',
            questions: [{
                title: '一天吃饭多少次?',
                options: [{text: '五次'}, {text: '七次'}, {text: '九次'},]
            }, {
                title: '一天睡觉几小时?',
                options: [{text: '18小时'}, {text: '20小时'}, {text: '25小时'},]
            }], //{title:'',options:[{text: ''}]}
            questionTitleToAdd: '',
            addQueOpen: false,
        }

        this.handleTitleChange = this.handleTitleChange.bind(this)
        this.addQuestion = this.addQuestion.bind(this)
    }

    handleTitleChange(e) {//Set tille
        const t = e.target
        this.setState({
            title: t.value
        })
    }

    addQuestion(title) {
        const questions = this.state.questions
        questions.push({
            title: title,
            options: [],
        })
        this.setState({questions})
    }

    render() {
        const questionCards = this.state.questions.map((question, index) => {
            const options = question.options.map((option, index) => {
                return (
                    <div key={index} style={{...myStyles.row, ...myStyles.twiceRem}}>
                        <p>{option.text}</p>
                        <IconButton children={<ContentClear/>}/>
                    </div>
                )
            })
            return (
                <Paper key={index}>
                    <div style={myStyles.row}>
                        <h3>{index + 1}.{question.title}</h3>
                        <IconButton children={<ContentClear/>}/>
                    </div>

                    <div>
                        {options}
                    </div>

                    <IconButton children={<ContentAdd/>}/>
                </Paper>
            )
        })


        return (
            <div>
                <TextField
                    hintText="主题"
                    floatingLabelText="填写问卷主题"
                    name='title'
                    value={this.state.title}
                    onChange={this.handleTitleChange}
                />

                {questionCards}

                <QuestionAdder addQuestion={this.addQuestion} />
            </div>
        )
    }
}